<template>
  <div class="diary-list">
    <div class="diary-list-wrap">
      <Screen :highlight="active" @classId="getData" />
      <div v-customLoading="loading">
        <div v-if="diaryData.length" class="diary-content">
          <div v-if="diaryData.length" class="diary-content-wrap">
            <div v-for="item in diaryData" :key="item.diary_group_id" class="diary-content-item">
              <diaryCoverList :datas="item" />
            </div>
          </div>
          <Pager
            :page-config="pageConfig"
            :home-tab-name="classId"
            @changeCurrentPage="changeCurrentPage"
          />
        </div>
        <div
          v-if="diaryData.length===0"
          class="diary-noData"
        >
          <div class="diary-noData-content">
            <img
              src="~assets/img/no-date.png"
              alt=""
            >
            <div class="diary-noData-content-text">
              这里什么都没有~
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Screen from '@/components/screen'
import { getDiaryList } from '@/api/diary'
import diaryCoverList from '@/components/diaryCoverList'
import Pager from '@/components/pager'
export default {
  components: {
    Screen,
    Pager,
    diaryCoverList
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [DiaryList] = await Promise.all([
      getDiaryList().then((res) => {
        return res
      })
    ])
    return {
      DiaryList
    }
  },
  data() {
    return {
      diaryData: [],
      classId: '',
      active: {},
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        pageTotal: 0
      },
      projectName: '',
      loading: false
    }
  },
  computed: {

  },
  created() {
    this.pageConfig.total = this.DiaryList.meta.total
    this.pageConfig.pageTotal = this.DiaryList.meta.last_page
    this.diaryData = this.DiaryList.data
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      if (this.$route.query.filter) {
        this.active = JSON.parse(this.$route.query.filter)
        this.projectName = this.active.name[this.active.name.length - 1]
        this.getData({ id: this.active.id, name: this.active.name }, true)
      }
    },
    getData({ id, name }, isfalse) {
      this.loading = true
      if (!isfalse) {
        const obj = {
          name,
          id
        }
        if (Array.isArray(name)) {
          this.projectName = name[name.length - 1]
        } else {
          this.projectName = name
        }
        this.$router.push({ query: { filter: JSON.stringify(obj) }})
        this.classId = id.length ? id[id.length - 1] : ''
        getDiaryList(this.classId, 1, 12).then(res => {
          this.diaryData = res.data
          this.pageConfig.total = res.meta.total
          this.pageConfig.pageTotal = res.meta.last_page
          this.loading = false
        })
      } else {
        this.classId = id.length ? id[id.length - 1] : ''
        getDiaryList(this.classId, 1, 12).then(res => {
          this.diaryData = res.data
          this.pageConfig.total = res.meta.total
          this.pageConfig.pageTotal = res.meta.last_page
          this.loading = false
        })
      }
    },
    getDataAdd(page) {
      this.loading = true
      getDiaryList(this.classId, page, 12).then(res => {
        this.diaryData = res.data
        this.pageConfig.total = res.meta.total
        this.pageConfig.pageTotal = res.meta.last_page
        this.loading = false
      })
    },
    changeCurrentPage(page) {
      this.pageConfig.pageNo = page
      this.getDataAdd(page)
    }
  },
  head() {
    return {
      title: `${this.projectName ? `${this.projectName}效果图_${this.projectName}前后对比照片_${this.projectName}恢复过程图片_容猫整形日记` : '效果图_前后对比照片_恢复过程图片_容猫整形日记'}`,
      meta: [
        { hid: 'description',
          name: 'description',
          content: `${this.projectName ? `${this.projectName}日记栏目通过对比照效果图记录了容猫真实用户的${this.projectName}的整形过程，${this.projectName}的整形日记与案例均由平台服务的求美者自主上传，真实可靠。让每个求美者都真实的感受到${this.projectName}整形前后的对比效果` : '日记栏目通过对比照效果图记录了容猫真实用户的的整形过程，的整形日记与案例均由平台服务的求美者自主上传，真实可靠。让每个求美者都真实的感受到整形前后的对比效果。'}`
        }, {
          name: 'keywords', content: `${this.projectName ? `${this.projectName}恢复过程图片,${this.projectName}对比照,${this.projectName}效果图` : '恢复过程图片,对比照,效果图'}`
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: 'https://m.rongcat.com/diary'
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.diary-list {
  width: 100%;
  // height: 1622px;
  padding-bottom: 10px;
  background: rgba(246, 246, 246, 1);
  .diary-list-wrap {
    width: 1190px;
    // height: 1622px;
    margin: 0 auto;
    overflow: hidden;
  }
  .diary-content{
    width: 1190px;
  }
  .diary-content-wrap{
    display: flex;
    flex-wrap: wrap;
  }
  .diary-content-item{
    margin-right: 10px;
  }
  .diary-content-item:nth-child(4){
    margin-right:0 !important;
  }
   .diary-content-item:nth-child(8){
    margin-right:0 !important;
  }
    .diary-content-item:nth-child(12){
    margin-right:0 !important;
  }
}
.diary-noData {
  width: 1190px;
  height: 790px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  .diary-noData-content {
    width: 242px;
    height: 210px;
    position: absolute;
    left: 50%;
    top:150px;
    margin-left: -121px;
    > img {
      width: 242px;
      height: 191px;
    }
    .diary-noData-content-text{
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:20px;
      text-align: center;
    }
  }
}

</style>
